import 'package:flutter/material.dart';

class WrapDemo extends StatefulWidget {
  WrapDemo({Key key}) : super(key: key);

  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<WrapDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WrapDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            Wrap(
              // 左右
              spacing: 20.0,
              // 上下间隙
              runSpacing: 50.0,
              children: <Widget>[
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 200.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 80.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 60.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 120.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 130.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 200.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.red,
                ),
                Container(
                  height: 50.0,
                  width: 100.0,
                  color: Colors.red,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
